<template>
  <div>
    <div class="fixed-top">
      <div class="top">
        <router-link to='/Mall'>
          <i class="el-icon-arrow-left icon"></i>
        </router-link>
        <div class="top-title">兑换页面</div>
      </div>
      <div class="menu">
          <div class="menu-main">
            <div class="menu-text" @click="didClickedItem(true)" :class="{active: this.flag === true}">
                宝贝
            </div>
            <div class="menu-text" @click="didClickedItem(false)" :class="{active: this.flag === false}">
                详情
            </div>
          </div>
      </div>
    </div>
    <div v-show="flag">
      <div class="banner">
        <img class="show-img" :src="bigImg" alt="">
      </div>
      <div class="introduce">
        <div class="iconfont introduce-text">&#xe87f;{{integral}}积分</div>
        <div class="introduce-text">{{name}}</div>
        <div class="introduce-text">剩余数量：{{amount}}</div>
      </div>
    </div>
    <div v-show="!flag">
      <div class="details"  v-for="(item,index) in imgs" :key="index">
        <img class="details-img" :src="item">
      </div>
    </div>
    <div id="exchange" class="bottom" @click="exchange()">
      立即兑换
    </div>
    <div class="content-tips">
      <div class="home-tips" v-show="tip">
        <div class="tips-desc">确认兑换此物</div>
        <div class="tips-choose">
          <el-button class="choose-left" @click="submit">确定兑换</el-button>
          <el-button class="choose-right" @click="tip=false">取消兑换</el-button>
        </div>
      </div>
    </div>
    <div></div>
  </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
import { garbageMixin } from '../../utils/mixin'
import { getLocalStorage, setLocalStorage } from '../../utils/localStorage'

export default {
  mixins: [garbageMixin],
  name: 'MallExchange',
  data () {
    return {
      flag: true,
      tip: false,
      good: '',
      sid: '',
      bigImg: '',
      amount: '',
      name: '',
      imgs: [],
      integral: ''
    }
  },
  methods: {
    // 判断为宝贝或详情页面
    didClickedItem (tag) {
      this.flag = tag
    },
    // 选择确定后，显示是否兑换成功
    submit () {
      let uid = getLocalStorage('id')
      let data = Qs.stringify({'uid': uid, 'sid': this.sid})
      let intergral = getLocalStorage('userIntergration')
      if (this.id === null) {
        this.$message({
          message: '对不起，您还未登录，请先登录',
          type: 'warning'
        })
        this.tip = false
      } else if (intergral <= this.integral) {
        this.$message({
          message: '您的积分不够，商品兑换失败',
          type: 'warning'
        })
      } else {
        let sessionId = getLocalStorage('sessionId')
        axios({
          method: 'put',
          url: '/brand/exchange',
          data,
          headers: {'sessionId': sessionId}}
        ).then(res => {
          console.log(res)
          this.$message({
            message: '商品兑换成功',
            type: 'success'
          })
          setLocalStorage('userIntergration', intergral - this.integral)
          this.tip = false
        })
      }
    },
    exchange () {
      this.tip = true
    }
  },
  mounted () {
    // console.log(this.$route.params.id)
    this.good = this.$route.params
    this.bigImg = this.good.image
    this.integral = this.good.price
    this.name = this.good.name
    console.log(this.good.id, 'datatata')
    axios.get('/brand/' + this.good.id).then((res) => {
      let data = res.data.data
      this.imgs.push(data.image0, data.image1, data.image2)
      this.amount = data.amount
      this.sid = data.id
      if (!(this.amount > 0)) {
        document.getElementById('exchange').className = 'notclick'
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global";
  .fixed-top {
    height: 76px;
    .top{
      position: fixed;
      display: flex;
      width: 100%;
      height: 45px;
      line-height: 45px;
      text-align: center;
      font-size: 17px;
      background: skyblue;
      .icon{
        float: left;
        overflow: hidden;
        font-size: 20px;
        margin-left: 10px;
      }
      .top-title{
        flex: 1;
        margin-right: 45px;
      }
    }
    .menu {
      position: fixed;
      top: 45px;
      width: 100%;
      .menu-main {
        height: 30px;
        line-height: 30px;
        background: #fff;
        position: relative;
        .menu-text {
          float: left;
          width: 50%;
          text-align: center;
          font-size: 10px;
        }
      }
    }
  }
  .active{
    background: skyblue;
  }
  .banner{
    overflow: hidden;
    width: 100%;
    height: 400px;
    .show-img{
      height: 100%;
    }
  }
  .introduce{
    width: 100%;
    font-size: 14px;
    background:#fff;
    .introduce-text{
      height:49px;
      line-height: 49px;
      padding-left: 5px;
      border-bottom: 1px solid #dbcece;
    }
  }
  .details{
    .details-img{
      width: 100%;
    }
  }
  .bottom{
    position: fixed;
    bottom: 0;
    background: skyblue;
    height: 45px;
    line-height: 45px;
    width: 100%;
    text-align: center;
    font-size: 15px;
  }
  .notclick {
    position: fixed;
    bottom: 0;
    background: skyblue;
    height: 45px;
    line-height: 45px;
    width: 100%;
    text-align: center;
    font-size: 15px;
    pointer-events: none;
    background: gray;
  }
  .content-tips {
    height: 120px;
    .home-tips{
      position: fixed;
      top: 350px;
      left: 2%;
      z-index: 1;
      width: 96%;
      height: 120px;
      background: white;
      border: 1px solid #DCDFE6;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      .tips-desc{
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        padding-top: 10px;
      }
      .tips-choose{
        height: 50px;
        .choose-left{
          float: left;
          margin-left: 10%;
        }
        .choose-right{
          float: right;
          margin-right: 10%;
        }
      }
    }
  }

</style>
